<template>
    <div id='wrap'>
        <h1>绑定 HTML class</h1>
        <!--绑定 HTML class:绑定对象  使用对象语法来动态绑定多个类名-->
        <p :class="{ active: isACtive, 'text-danger': hasError }" @click="changeClass">沁园春·雪</p>
        <hr>

        <!-- 绑定 HTML class:绑定对象变量 reactive -->
        <p :class="classObj" @click="changeClass2">沁园春·雪</p>
        <hr>

        <!-- 绑定 HTML class:绑定对象变量 ref -->
        <p :class="classObjRef" @click="changeClass3">沁园春·雪</p>
        <hr>

        <!-- 绑定 HTML class: 在组件中使用 -->
        <p>
            <!-- 把组件当成标签来写 -->
            <!-- <StuDemoSon4 :class="classObj" @click="changeClass2"/> -->
            <StuDemoSon4 :class="classObj" @click="changeClass2"></StuDemoSon4>
        </p>
        <hr>

        <!-- 绑定 HTML class:绑定数组 ref -->
        <p :class="[isACtive ? activeClass2 : '', errorClass2, 'active-new']" @click="changeClass4">沁园春·雪</p>
        <hr>

        <!-- 绑定 HTML class: 计算属性 -->
        <p :class="classObjComp">沁园春·雪</p>
    </div>
</template>

<script lang='ts'>
export default {
    name: 'dayStuDemo13',
}
</script>

<script lang='ts' setup>
import { computed, reactive, ref } from 'vue';
import classname from './component/classname.vue'
//绑定 HTML class:绑定对象  使用对象语法来动态绑定多个类名
const isACtive = ref(false)
const hasError = ref(false)
function changeClass() {
    isACtive.value = !isACtive.value
    hasError.value = !hasError.value
}
//绑定 HTML class:绑定对象变量 reactive
const classObj = reactive({
    active: true,
    'text-danger': true
})
function changeClass2() {
    classObj.active = !classObj.active
}

//绑定 HTML class:绑定对象变量 ref
const classObjRef = ref({
    active: true,
    'text-danger': true
})
function changeClass3() {
    classObjRef.value['text-danger'] = !classObjRef.value['text-danger']
}
//绑定 HTML class:绑定数组 ref
const activeClass2 = ref('active')
const errorClass2 = ref('text-danger')
function changeClass4() {
    errorClass2.value = 'text-success'
}

//绑定 HTML class: 计算属性
const classObjComp = computed(() => ({
    active: true,
    'text-danger': true,
}))
</script>

<style lang='scss'>
.active {
    color: darkorange;
}

.text-danger {
    background-color: red;
}

.text-success {
    background-color: green;
}

.active-new {
    font-size: 22px;
}
</style>